<template>
  <div class="permissions-container">
    <PageTools>
      <template #right>
        <el-button type="primary" size="mini" @click="handleClick('',1)">添加权限</el-button>
      </template>
    </PageTools>

    <el-table
      :data="tableData"
      style="width: 100%; margin: 20px 0"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="code" label="标识" />
      <el-table-column prop="description" label="描述" />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row.id,2)"
          >添加</el-button>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog :visible.sync="showDialog" title="弹层标题">
      <perDia ref="perDia" :load-per="loadPer" @success="showDialog=false" />
    </el-dialog>
  </div>
</template>

<script>
import { transArray2 } from '@/utils'
import { getPermissionList, delPermission } from '@/api/permissions'
import perDia from './perDia.vue'

export default {
  name: '',
  components: { perDia },
  data() {
    return {
      tableData: [],
      showDialog: false
    }
  },
  computed: {},
  created() {
    this.loadPer()
  },
  methods: {
    // 获取权限列表
    async loadPer() {
      const res = await getPermissionList()
      this.tableData = transArray2(res.data) // 利用递归渲染
      console.log(this.tableData, 66666666666)
    },
    handleClick(pid, type) {
      this.showDialog = true

      // 等更新 DOM 完毕后执行，不然无法获取子组件中的 formData.pid
      this.$nextTick(() => {
        // 使用 ref 获取到子组件中 formData.pid，并赋值给它
        this.$refs.perDia.formData.pid = pid
        this.$refs.perDia.formData.type = type
      })
    },
    // 删除
    async del(id) {
      const res = await delPermission(id)
      // 刷新页面
      this.loadPer()
    }
  }
}
</script>
<style lang='scss'  scoped>
.permissions-container {
  padding: 20px 30px;
}
</style>
